<template>
    <div>
        <div class="loading"></div>
        <div
            v-if="layer"
            class="layer-box"
            :style="'background-color:'+color"
        ></div>
    </div>
</template>

<script>
    export default {
        name: "loading",
        props:{
            layer:{
                type:Boolean,
                default:false
            },
            color:{
                type:String,
                default: "rgba(255,255,255,0.1)"
            }
        }
    }
</script>

<style lang="scss" scoped>
    .loading {
        width: 24px;
        height: 24px;
        position: absolute;
        left: 50%;
        top: 40%;
        z-index: 19999;
        transform: translate(-45%,-40%);
        background-size: 100%;
        animation: aaa-spin 2s infinite linear;
        display: inline-block;
        background-image: url();
    }
    .layer-box{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(255,255,255,0.1);
        z-index: 19990;
    }

    @keyframes aaa-spin {
        0% {
            transform: rotate(0deg)
        }

        100% {
            transform: rotate(359deg)
        }
    }
</style>
